<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI Chat</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#3B82F6',
secondary: '#10B981'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
.grid-cols-auto-fit {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 1rem;
}
i {
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>
<body class="bg-white min-h-[1024px]">
<div class="flex h-screen">
<!-- 左侧导航 -->
<div class="w-[119px] bg-white flex flex-col">
<div class="p-6 text-center">
<div class="font-['Pacifico'] text-2xl text-primary tracking-wider">AI Chat</div>
</div>
<div class="px-4 py-4 flex flex-col items-center text-center">
<div class="w-16 h-16 bg-gradient-to-r from-primary to-secondary rounded-full flex items-center justify-center text-white shadow-lg mb-3">
<span class="text-2xl font-semibold">M</span>
</div>
<div class="text-base font-medium tracking-wide">默默</div>
<div class="text-sm text-gray-600 flex items-center mt-1">
<i class="fas fa-crown text-yellow-400 mr-1"></i>
<span class="font-medium">VIP会员</span>
</div>
</div>
<nav class="flex-1 px-3 py-6">
<div class="space-y-2">
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors">
<i class="fas fa-history w-5 h-5 text-primary mb-1"></i>
<span class="font-medium text-sm tracking-wide">历史记录</span>
</a>
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors">
<i class="fas fa-star w-5 h-5 mb-1"></i>
<span class="font-medium text-sm tracking-wide">收藏夹</span>
</a>
<a href="#" class="flex flex-col items-center px-4 py-3 text-gray-700 rounded-xl hover:bg-gray-50 transition-colors">
<i class="fas fa-cog w-5 h-5 mb-1"></i>
<span class="font-medium text-sm tracking-wide">设置</span>
</a>
</div>
</nav>
</div>
<!-- 右侧内容 -->
<div class="flex-1 flex bg-white">
<!-- 历史对话区 -->
<div class="w-[195px] overflow-y-auto">
<div class="p-4">
<div class="font-medium text-base mb-4">历史对话</div>
<div class="space-y-3">
<div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
<div class="text-sm font-medium mb-1">关于神经网络的研究</div>
<div class="text-xs text-gray-500">2025-09-02 14:30</div>
</div>
<div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
<div class="text-sm font-medium mb-1">前端跨域解决方案</div>
<div class="text-xs text-gray-500">2025-09-02 11:20</div>
</div>
<div class="p-3 bg-gray-50 rounded-lg cursor-pointer hover:bg-gray-100">
<div class="text-sm font-medium mb-1">AI在医疗领域的应用</div>
<div class="text-xs text-gray-500">2025-09-01 16:45</div>
</div>
</div>
</div>
</div>
<!-- 主内容区 -->
<div class="flex-1 flex flex-col p-6" style="width: 64%;">
<!-- 顶部导航 -->
<div class="h-16 flex items-center justify-center px-8 bg-gradient-to-r from-white via-gray-50 to-white rounded-xl shadow-sm border border-gray-100 mx-auto" style="width: 64%;">
<nav class="flex items-center space-x-10">
<a href="#" class="text-primary font-medium relative group">
<span class="relative z-10">最新推荐</span>
<span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform origin-left transition-all duration-300 ease-out"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
<span class="relative z-10">Agents</span>
<span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
<span class="relative z-10">联网搜索组</span>
<span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
<span class="relative z-10">写作组</span>
<span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
<span class="relative z-10">编程组</span>
<span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
<a href="#" class="text-gray-600 hover:text-gray-900 font-medium relative group">
<span class="relative z-10">绘画组</span>
<span class="absolute inset-x-0 -bottom-1 h-[3px] bg-primary/90 rounded-full transform scale-x-0 origin-left transition-all duration-300 ease-out group-hover:scale-x-100"></span>
</a>
</nav>
</div>
<!-- 主要内容区 -->
<div class="flex-1 overflow-auto p-6">
<!-- AI模型卡片网格 -->
<div class="grid grid-cols-4 gap-4 mb-8 mx-auto" style="width: 64%;">
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-robot text-blue-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">GPT-5-Agent</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-brain text-purple-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Claude-4.1</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-sparkles text-green-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Gemini-2.5</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-orange-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-wand-magic-sparkles text-orange-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">DeepSeek</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-pink-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-image text-pink-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">DALL·E 3</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-indigo-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-palette text-indigo-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Midjourney</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-yellow-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-camera text-yellow-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Stable XL</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-red-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-code text-red-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">CodeLlama</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-lightbulb text-green-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">PaLM-2</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-star text-blue-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">LLaMA-3</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-user-robot text-purple-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Anthropic-2</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-orange-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-bolt text-orange-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Falcon-180B</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-green-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-seedling text-green-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">BLOOM</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-blue-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-wind text-blue-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Mistral-8x7B</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-indigo-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-atom text-indigo-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Yi-34B</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-purple-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-cloud text-purple-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">Qwen-72B</div>
</div>
</div>
</div>
<div class="bg-white p-2.5 rounded-lg border border-gray-200 hover:border-primary/30 hover:shadow-md transition-all cursor-pointer">
<div class="flex items-start space-x-2">
<div class="w-6 h-6 rounded-lg bg-pink-100 flex items-center justify-center flex-shrink-0">
<i class="fas fa-comments text-pink-600 text-sm"></i>
</div>
<div class="flex-1 min-w-0">
<div class="font-medium text-sm">ChatGLM-4</div>
</div>
</div>
</div>
</div>
<!-- 对话区域 -->
<div class="mt-auto bg-white rounded-2xl border border-gray-200 p-6" style="width: 64%; margin-left: auto; margin-right: auto;">
<!-- 输入框 -->
<div class="relative">
<textarea class="w-full border-none bg-gray-50/70 rounded-2xl pl-6 pr-32 py-5 resize-none focus:ring-2 focus:ring-primary focus:outline-none text-base" rows="3" placeholder="请输入问题（提示：输入后可快速生成AI回答，支持截图粘贴、图片/文件上传）"></textarea>
<div class="absolute right-4 bottom-4 flex items-center space-x-2">
<button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 hover:bg-gray-300">
<i class="fas fa-microphone"></i>
</button>
<button class="w-8 h-8 rounded-full bg-gray-200 flex items-center justify-center text-gray-600 hover:bg-gray-300">
<i class="fas fa-paperclip"></i>
</button>
<button class="w-8 h-8 rounded-full bg-primary text-white flex items-center justify-center hover:bg-primary/90">
<i class="fas fa-paper-plane"></i>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>